<?php
/**
 * TomatoCMS
 *
 * LICENSE
 *
 * This source file is subject to the GNU GENERAL PUBLIC LICENSE Version 2
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@tomatocms.com so we can send you a copy immediately.
 *
 * @copyright    Copyright (c) 2009-2010 TIG Corporation (http://www.tig.vn)
 * @license        http://www.gnu.org/licenses/gpl-2.0.txt GNU GENERAL PUBLIC LICENSE Version 2
 * @version     $Id: list.phtml 4185 2010-08-01 16:31:02Z huuphuoc $
 * @since        2.0.0
 */
?>
<?php
$this->headTitle($this->translator('attriubte_value_page_title'));

$this->headLink()
    ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/ui.core.css')
    ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/ui.resizable.css')
    ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/ui.dialog.css')
    ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/ui.theme.css')
    ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/ui.tabs.css')
    ;

$this->headScript()
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/ui.core.js')
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/ui.draggable.js')
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/ui.resizable.js')
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/ui.dialog.js')
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/ui.tabs.js')
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.validate/jquery.validate.min.js')
    ;
?>
<div class="grid_12 t_a_ui_breadcrumb">
    <span><a href="<?php echo $this->url(array(), 'shop_product_list'); ?>"><?php echo $this->translator('product_list_breadcump'); ?></a></span>
    <span><a href="<?php echo $this->url(array('product_id' => $this->product_id), 'shop_product_edit'); ?>"><?php echo $this->translator('product_edit_breadcump'); ?></a></span>
    <span><a href="<?php echo $this->url(array('product_id' => $this->product_id), 'shop_product_choose_attribute'); ?>"><?php echo $this->translator('product_choose_attribute_breadcump'); ?></a></span>
    <span><?php echo $this->translator('attribute_value_add'); ?></span>
</div>

<div class="grid_12 t_a_bottom">
    <div class="grid_2 alpha">&nbsp;</div>
    <div class="grid_10 omega">
        <!-- Photos -->
		
        <div class="clearfix" style="display:none;" id="uploadFile">
            <?php
            echo $this->helperLoader('upload')->uploader('multimedia',
                array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 						'sizeLimit' => 1024 * 1024 * 5),
                array('onProgress' => 'onUploadProgress', 'onComplete' => 'onUploadComplete'),
                'uploadFiles');
            ?>
            <div style="width: 780px; height: 70px; overflow: auto; border: 1px solid #222">
				
                <ul id="photos" style="list-style-type:none"></ul>
            </div>
        </div>
		<div class="clearfix"><a id="btnUploadFile" href="javascript:void(0);">Upload</a</div>
    </div>
</div>
<style>
    .t_a_ui_list li{
        height:auto;
    }
    .t_a_ui_list li a{
        height:auto;
    }
    .div_tabs.ui-widget-content{
        background: none;
    }

   .ui-widget-content{
        color: inherit;
        border: 0px solid;
    }

    .div_tabs.ui-widget-content a{
        color: #FFFEFE;
    }

    .ui-widget-header{
        border:0px solid
    }
    .ui-state-active, .ui-widget-content .ui-state-active{
        background: none;
        border: 0px solid;
        color: inherit;
    }
    .ui-state-default, .ui-widget-content .ui-state-default{
        background: none;
        border: 0px solid;
        color: inherit;
    }
    .ui-state-default, .ui-widget-content .ui-state-default a{
        color: #B1B1B1;
    }
    .ui-tabs-selected, .ui-widget-content .ui-tabs-selected{
        background: none;
        border: 0px solid;
        color: inherit;
    }
    .ui-state-hover, .ui-widget-content .ui-state-hover a{
        color: #FFFEFE;
    }
    .ui-state-hover, .ui-widget-content .ui-state-hover a:link{
        color: #FFFEFE;
        text-decoration: underline;
    }
    .ui-tabs-selected, .ui-widget-content .ui-tabs-selected a{
        color: #FFFEFE;
    }
    .ui-tabs-selected, .ui-widget-content .ui-tabs-selected a:link{
        color: #FFFEFE;
        text-decoration: underline;
    }
    .t_a_ui_helper_head{
        line-height:18.5px;
    }
    .ui-tabs .ui-tabs-panel{
        padding: 0.4em .3em;
    }
    .delete_box span{
        color: #DE6B18;
        cursor: pointer;
        padding: 5px 0 0 35px;
        float: right;
        line-height: 28px;
    }
    .div_tabs label{
        width: 100px;
    }

</style>
<?php
    $arrNumber = array(
        1 => 1,
        2 => 2,
        3 => 3,
        4 => 4,
        5 => 5,
        6 => 6,
        7 => 7,
        8 => 8,
        9 => 9,
        10=>10
    );

    $number = count($arrNumber);
    $attributes = $this->attributes;
?>
<?php if(count($attributes)>0):?>
<form action="<?php echo $this->url(array('product_id' => $this->product_id), 'shop_product_attribute_value'); ?>" method="POST" id="addAttributeValue">
<div class="grid_12 t_a_bottom">
    <div class="grid_2 alpha">&nbsp;</div>
    <div class="grid_7">
        <span><?php echo $this->translator('attribute_select_number_added'); ?></span>
        <select id="value_number" style="width:100px">
            <option value=""><?php echo $this->translator('attribute_number_none');?></option>
            <?php foreach($arrNumber as $key=>$num):?>
            <option value="<?php echo $key;?>"><?php echo $num;?></option>
            <?php endforeach;?>
        </select>
    </div>
    <div class="grid_3 omega">
        <div class="t_a_right">
            <button stype="submit"><span><?php echo $this->translator('attribute_button_add');?></span></button>
        </div>
    </div>
</div>

<div class="grid_12" id="success_mess"><?php echo $this->flashMessenger(); ?></div>

<div class="grid_12">
    <!-- List of attribute -->
    <div class="grid_2 alpha">
        <ul id="attribute" class="t_a_ui_list">
            <?php if(count($attributes)>0):?>
            <?php foreach ($attributes as $key=>$attribute) : ?>
            <?php
                $class=null;
                if ($this->att_id == $attribute->attribute_type_id){
                    $class = 'class="t_a_ui_active"';
                }elseif($key == 0 && !$this->att_id){
                    $class = 'class="t_a_ui_active"';
                }
            ?>
            <li <?php echo $class;?> ><a href="javascript: void(0);" rel="<?php echo $attribute->attribute_type_id;?>"><?php echo $attribute->attribute_type_admin_name; ?></a></li>
            <?php endforeach; ?>
            <?php endif;?>
        </ul>
    </div>

    <!-- List of value -->
    <div class="grid_10 omega">
        <div id="htmlValueOutput"></div>
        <div id="htmlBoxOutput"></div>
        <div class="clearfix"></div>
        <div id="htmlLoading"></div>
    </div>
</div>
<?php
    $att_id = 0;
    if(count($attributes)>0){
        $att_id = ($this->att_id)?$this->att_id:$attributes[0]->attribute_type_id;
    }
?>
<input type="hidden" value="<?php echo $att_id;?>" name="attribute_type_id" id="attribute_type_id" >
</form>
<?php else:?>
    <div class="grid_12"><?php echo $this->translator('not_found_attribute');?>
<?php endif;?>

<div style="display:none;">
<?php
    /**
    * Allows user to browse uploaded file
    * @since 2.0.4
    */
    echo $this->browser('/upload/multimedia/'.Zend_Auth::getInstance()->getIdentity()->user_name, 'jpg,gif,png', 'insertImage(%s)');
?>
</div>

<div id="messageDialog"></div>
<script type="text/javascript">
/**
 * Upload handlers
 */
 $(document).ready(function(){
	$("#btnUploadFile").click(function(){
		$("#uploadFile").toggle();
	});
 });
function onUploadComplete(event, ID, fileObj, response, data) {
    var images = $.evalJSON(response);
    var res = response;
    $('<li style="float: left; padding: 5px">'+fileObj.name+',</li>').appendTo($('#photos'));
    $('#title').val($('#title').val() + ',' + fileObj.name);

    var thumbnails = ['square', 'thumbnail', 'small', 'crop', 'medium', 'large', 'original'];
    for (var i in thumbnails) {
        $('#' + thumbnails[i]).val($('#' + thumbnails[i]).val() + ',' + images[thumbnails[i]].url);
    }
    $('#watermark').removeAttr('disabled');
    if ($('#watermark').attr('checked')) {
        $('#watermarkContainer').show();
    }
};

function updateUploadSettings() {
    var text = image = '';

    switch ($('#watermarkMethod').val()) {
        case 'text':
            text = $('#watermarkText').val();
            break;
        case 'image':
            image = $('#watermarkImageUrl').val();
            break;
    }

    var sizes = '';
    $('#sizesContainer').find('input').each(function() {
        if ($(this).attr('checked') == true) {
            sizes += ',' + $(this).attr('value');
        }
    });
    sizes = sizes.substring(1);

    $('#uploadFiles').uploadifySettings('scriptData', {'watermark': '1', 'text': text, 'color': $('#watermarkColor').attr('value'), 'image': image, 'position': $('#watermarkPosition').val(), 'sizes': sizes});
};


/**
* Function load value by attribute
**/
function ajaxValue(id){
    jQuery.ajaxq('value', {
        type: 'POST',
        url: "<?php echo $this->url(array(), 'attribute_attribute_ajax_value'); ?>",
        data: { id: id, pId: '<?php echo $this->product_id;?>' },
        success: function(html) {
            $("#htmlLoading").html('').removeClass('t_a_ui_helper_loading');
            $('#htmlValueOutput').html(html);
        }
    });
}

$(document).ready(function() {

    /*('#addAttributeValue').validate({

    });*/

    /**
    * Onload value by current attribute
    **/
    var att_id = '<?php echo $att_id;?>';
    if(att_id > 0){
        $("#htmlLoading").html('').addClass('t_a_ui_helper_loading');
        ajaxValue(att_id);
    }

    /**
    * Html box value
    * IE checked
    **/
    $("#value_number").change(function(){
        var self = this;
        value = $(self).val();
        num = $('#count').val();
        if(num){
            $("#success_mess").html('');
            $("#no_value").html('');
            $("#htmlLoading").html('').addClass('t_a_ui_helper_loading');
            $.ajaxq('box', {
                type: 'POST',
                url: "<?php echo $this->url(array(), 'attribute_attribute_ajax_box'); ?>",
                data: { number: value, index: num },
                success: function(html) {
                    $("#htmlLoading").html('').removeClass('t_a_ui_helper_loading');
                    $('#htmlBoxOutput').html(html);
                }
            });
        }
    });

    /**
    * Load value based on selected attribute
    */
    $('#attribute').find('a').click(function() {
        $('#attribute').find('li').removeClass('t_a_ui_active');
        $(this).parent().addClass('t_a_ui_active');

        id = $(this).attr('rel');
        $('#attribute_type_id').attr('value', id);

        $('#htmlBoxOutput').html('');
        $("#success_mess").html('');
        $("#htmlLoading").html('').addClass('t_a_ui_helper_loading');
        ajaxValue(id);
    });

});
</script>